<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线聊天室</title>
    <style>
        #chatroom{
            width:280px;
            height:420px;
            border-radius: 8px;
            border:1px solid darkcyan;
            box-sizing: border-box;
            padding:10px;
            overflow: auto;
        }
    </style>
    <%- include common  %>
</head>
<body>
    <%- include("head",{title:"chat",username}) %>
    
    <div class="container-fluid">
        <div class="container">
            <div>
                <h2>WebSokcet - 聊天室 </h2>
        
                <div id="chatroom"></div>
        
                <div>
                    <input type="text" placeholder="请输入内容" id="sendtext">
                    <input type="button" value="发送内容" id="sendbtn" />
                </div>
            </div>
        </div>
    </div>

    <%- include foot %>

    <script>
        //  客户端 socket 

        // # 客户端的 Socket
        // 1. 创建客户端的socket
        // 2. 链接服务器的socket
        // 3. 发送消息到服务器端
        // 4. 接收来自服务器的 数据
        // 5. 监听服务器的socket 关闭 error

        var ws = new WebSocket("ws://192.168.51.21:3800");    // 创建客户端的socket   链接服务器的socket
        
        //  发送消息到服务器端   1 
        ws.onopen = function(){
            ws.send("大家好,我是来自wh2010的一员...")
        }

        // 接收来自服务器的 数据
        ws.onmessage=function(data){
            console.log(data)
            document.getElementById("chatroom").innerHTML += `<p>${data.data}</p>`
        }
        
        // 5. 监听服务器的socket 关闭 error
        ws.onclose = function(){
            alert("服务端 Socket 已经关闭")
            document.getElementById("chatroom").innerHTML += `<p>服务端 Socket 已经关闭</p>`
        }

        ws.onerror = function(err){
            alert("服务端 Socket 出现异常")
            document.getElementById("chatroom").innerHTML += `<p>服务端 Socket 出现异常 -- ${err}</p>`
        }
        

        function sendMsg(){
            ws.send(sendtext.value)
            sendtext.value = ""
        }

        sendbtn.onclick = sendMsg;

        document.onkeydown = function(e){
            if(e.keyCode==13){
                sendMsg()
            }
        }
    </script>
</body>
</html>